<template>
  <div class="svg-selector-panel" @click="handleClick">
    <g-svg-icon
      v-for="iconConfig in IconSelectorData"
      :key="iconConfig.value"
      :id="iconConfig.value"
      :name="iconConfig.name"
      class="svg-item"
    />
  </div>
</template>

<script>
import { IconSelectorData } from './icon-selector.data'
console.log()
export default {
  name: 'SvgSelectorPanel',
  data() {
    return {
      IconSelectorData
    };
  },

  mounted() {
    
  },

  methods: {
    handleClick(e) {
      let target = e.target
      if(target.tagName === 'use' && target.parentNode.tagName === 'svg') {
        target = target.parentNode
      }
      if(target.tagName === 'svg' && target.parentElement.tagName === 'I') {
        this.$emit('selectedIconName',target.parentElement.id)
      }
    }
  },
};
</script>

<style lang="scss">
.svg-selector-panel {
  width: 352px;
  height: 336px;
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .svg-item {
    width: 24px;
    height: 24px;
    margin: 4px;
    /* color: '#409EFF' */
    &:hover {
      color: #2F54EB;
      background: #e3e3e3;
      border-radius: 2px;
      box-shadow: 2px 2px 4px 4px #f5f5f5;
    }
  }
}
</style>